<template>
    <div>
        <ChildrenView :title="title" :num="userToday" >
            <template #fou>
                <div id="oo"></div>
            </template>
            <p class="p"></p>

            <template>
                <div class="c"><span>日同比</span><span>{{userGrowthLastDay}}</span><span class="one ones" >
                </span><span>月同比</span><span>{{userGrowthLastMonth}}</span ><span class="one twos"></span></div>
            </template>
        </ChildrenView>
    </div>
</template>

<script>
import ChildrenView from './ChildrenView.vue';
import getData from '@/mixin/mixin'
export default {
    components: { ChildrenView },
    mixins:[getData],
    data() {
        return {
            title: '累计用户数',
            sum:'65.84%',
            com:'107.30%'
        }
    },
    watch:{
        userLastDay(){
            return this.gets()
        }
    },
    methods:{
        gets(){
            var myChart = this.$echarts.init(document.getElementById('oo'));
        let options = {
            yAxis: {
                show: false,
                type: 'category'
            },
            xAxis: {
                show: false
                
            },
            grid: {
                right: 0,
                bottom: 0,
                left: 0,
                top:0
            },
            series: [
                {
                    type: 'bar',
                    data: [this.userLastDay],
                    smooth:true,
                    showSymbol: false,
                    color: 'green',
                    lineStyle:{
                        width:0
                    },
                    barWidth:10,
                    stack: 'Total',
                },
                {
                    type: 'bar',
                    data: [this.userLastMonth],
                    smooth:true,
                    showSymbol: false,
                    color: 'gray',
                    lineStyle:{
                        width:0
                    },
                    barWidth:10,
                    stack: 'Total',
                },
                {
            type: "custom",
            data: [100],
         
            renderItem: (params, api) => {
              //  取出x的值
              let x = api.value(0);
              //根据x值生成坐标
              let point = api.coord([x, 0]);
              //绘图
              return {
                type: "group", //定义一组图形
                position: point, //坐标
                children: [
                  {
                    //第一个图形
                    type: "path",
                    shape: {
                      d: "M951.1626 819.412438 72.8374 819.412438 511.999488 204.586538Z",
                      x: 160, //x偏移量
                      y: 10, //y偏移量
                      width: 10,
                      height: 10,
                      layout: "cover", //根据给定的宽和高进行填充
                    },
                    style: {
                      fill: "green",
                    },
                  },
                  {
                    //第一个图形
                    type: "path",
                    shape: {
                      d: "M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z",
                      x: 160, //x偏移量
                      y: -20, //y偏移量
                      width: 12,
                      height: 12,
                    },
                    style: {
                      fill: "green",
                    },
                  },
                ],
              };
            },
          },

            ]
        }
        myChart.setOption(options)
        }
    },
    mounted(){
       
    }
}
</script>
<style lang="scss">
    .c{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    #oo{
        width: 100%;
        height: 65px;
    }
</style>